import { useCallback, useReducer } from "react"
import { ACTION_TYPE, IState, ITodo } from "./data";
import Input from "./input"
import List from "./list"
import { todoListReducer } from "./reducer";
const Todolist = () => {

  const initstate = () => {
    return { todoList: [] }
  }

  const [state, dispatch] = useReducer(todoListReducer, [], initstate)

  const toggleTodo = useCallback((id: number) => {
    dispatch({
      type: ACTION_TYPE.TOGGLE_TODO,
      payload: id
    })
  }, [])
  const removeTodo = useCallback((id: number) => {
    dispatch({
      type: ACTION_TYPE.REMOVE_TODO,
      payload: id
    })
  }, [])
  const addTodo = useCallback((value: ITodo) => {
    dispatch({
      type: ACTION_TYPE.ADD_TODO,
      payload: value
    })
  }, [])
  return (<div>
    <Input {...state} addTodo={addTodo}></Input>
    <List {...state} toggleTodo={toggleTodo} removeTodo={removeTodo}></List>
  </div>)
}
export default Todolist